<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue中常用修饰符</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>

  <body>
    <div id="app">
      <!-- vue中的常用修饰符 -->
      <!-- v-on的常用修饰符 -->
      <!-- .stop：取消事件冒泡 -->
      <div @click="divClick">
        父元素
        <button @click.stop="btnClick">点击</button>
      </div>
      <!-- prevent：取消默认事件-->
      <a href="http://www.baidu.com" @click.prevent="aClick">百度一下</a>
      <!-- .{keyCode(键盘的编码) | keyAlias(键盘的简写)}：只有当事件是从特定的键触发时才会触发回调 -->
      <input type="text" @keyup.enter="keyUp" />
      <!-- .once：只能触发一次回调 -->
      <button @click.once="onceClick">点击once</button>
      <hr />
      <!-- .lazy: 可以让数据在失去焦点或者回车的时候才会更新 -->
      <input type="text" v-model.lazy="message" />
      <p>{{message}}</p>
      <!-- .number: 将输入框种内容转为数字类型 -->
      <input type="text" v-model.number="age" />
      <p>{{typeof age}}</p>
      <!-- .trim : 去除首尾的空格 -->
      <input type="text" v-model.trim="name" @keyup="namekeyup" />
    </div>
  </body>
  <script>
    var app = Vue.createApp({
      data() {
        return {
          message: "helloworld",
          age: 18,
          name: "",
        };
      },
      methods: {
        divClick() {
          console.log("父元素被点击了");
        },
        btnClick() {
          console.log("按钮被点击了");
        },
        aClick() {
          console.log("a标签被触发了");
        },
        keyUp() {
          console.log("keyUp被触发了");
        },
        onceClick() {
          console.log("onceClick被点击了");
        },
        namekeyup() {
          console.log(this.name);
        },
      },
    });
    app.mount("#app");
  </script>
</html>
